在Vue.js中，$emit是一個用來在子元件和父層元件之間傳遞訊息的方法。
就像是一個小信使，可以把資訊從子元件送到父層元件，這樣就可以在應用程式裡面做出互動了。

接下來用一個例子來解釋。假設有一個父層元件叫做App.vue，裡面包含了一個子元件ChildComponent.vue。
想要在子元件點擊一個按鈕後，通知父層元件進行相應的處理。

ChildComponent.vue範例:

<template>
  <button @click="sendMessage">點我傳訊息給小明</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', '這是來自子元件的訊息！');
    }
  }
}
</script>

這裡，在按鈕上綁定了一個click事件，當按鈕被點擊時，就會呼叫sendMessage這個方法。而在sendMessage方法裡，使用了this.$emit，並傳入了兩個參數 ，第一個參數是訊息的名稱（這裡是message），第二個參數是要傳遞的內容。

接下來，在父層元件App.vue中，可以這樣接收這個訊息：

<template>
  <div>
    <ChildComponent @message="handleMessage" />
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message;
    }
  }
}
</script>

一開始引入了ChildComponent，然後在模板中使用了ChildComponent。
並且綁定了一個message事件，當子元件發送訊息時，會呼叫handleMessage這個方法，並將訊息內容更新到receivedMessage這個變數中。

這樣一來，當我們在子元件中點擊按鈕時，就會觸發sendMessage方法，
然後通過$emit把訊息傳遞到父層元件，最終更新到receivedMessage，就可以在畫面上看到來自子元件的訊息。

$emit跟props差別:

1.$emit:
用途：$emit 主要用於子元件向父層元件傳遞消息或事件。
作用：子元件可以透過 $emit 觸發一個自定義事件，並且可以傳遞數據到父層元件中。
2.props:
用途：props 用於從父層元件向子元件傳遞數據。
作用：父層元件可以通過在子元件上使用 v-bind 或簡寫的 : 語法，將數據作為屬性傳遞給子元件。